<!--  -->
<template>
  <div
    v-if="goods"
    class="prod"
    :class="{ cur: navIndex == 0 }"
    @click="changeTop"
  >
    <div class="navvarContentItem_one">
      <div class="left" id="scrollLeft">
        <div class="left-container">
          <p
            v-for="(item, index) in goods"
            :key="index"
            @click="checkleftItem(index)"
            :class="{ cur: index == _getCurrentIndex }"
          >
            <img v-if="item.icon" :src="item.icon" class="icon" />
            {{ item.name }}
          </p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="right" id="scrollRight">
        <div class="right-container" ref="container">
          <div class="right-goods" v-for="(item, i) of goods" :key="i">
            <h6>{{ item.name }}</h6>
            <div class="category-items">
              <div
                class="item"
                v-for="(food, index) of item.foods"
                :key="index"
                @click="jumpCoves(food)"
              >
                <div class="left-image">
                  <img :src="food.image" />
                </div>
                <div class="right-content">
                  <div class="title">{{ food.name }}</div>
                  <div class="desc">{{ food.description }}</div>
                  <div class="sales">
                    <p>月售 {{ food.sellCount }}份</p>
                    <p>好评率 100%</p>
                  </div>
                  <div class="price">
                    <p class="left-price">￥{{ food.price }}</p>
                    <p class="right-button" @click.stop="toCar(food)">+</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mb"></div>
        </div>
      </div>
    </div>
    <mt-popup
      v-if="popupData"
      v-model="popupVisible"
      position="center"
      style="top: 35%"
    >
      <section class="popup">
        <div>
          <img :src="popupData.image" alt="" />
        </div>
        <div class="title">
          <h4>{{ popupData.name }}</h4>
          <div>
            <p>月售 {{ popupData.rating }}</p>
            <p>好评率 100%</p>
          </div>
        </div>
        <p>品牌</p>
        <span style="font-size: 14px; color: #9a9494">老板力推</span>
        <div
          class="bottom"
          style="display: flex; justify-content: space-between"
        >
          <p style="font-size: 18px; color: rgb(250, 110, 97)">
            ￥
            {{ popupData.price }}
            <span style="font-size: 14px; color: #9a9494">/约500克</span>
          </p>
          <mt-button
            @click.stop="toCar(popupData)"
            style="
              background-color: rgb(255, 203, 82);
              color: #111;
              border-radius: 20px;
            "
            >加入购物车</mt-button
          >
        </div>
      </section>
    </mt-popup>
    <!-- 下方购物车 -->
    <div class="shopCar" @click="bottomCar">
      <div class="car">
        <img
          src="../../assets/images/shupcar/8f4d255dfbe4e00e7010148eb76ca753.png"
          v-show="$store.state.shopcar.subtotal < 20"
          @click.stop
        />
        <img
          v-show="$store.state.shopcar.subtotal >= 20"
          src="../../assets/images/shupcar/34088a7505729ed54cdfcf1ee9c3d15d.png"
          @click.stop
        />
      </div>
      <div class="pricearea">
        <div class="price">
          <h6>￥{{ $store.state.shopcar.subtotal }}</h6>
          <p>配送费4元</p>
        </div>
        <div class="btn" v-show="$store.state.shopcar.subtotal < 20">
          ￥20元起送
        </div>
        <div
          class="btn"
          v-show="$store.state.shopcar.subtotal >= 20"
          style="background-color: rgb(1, 180, 60)"
          @click.stop="checkout"
        >
          去结算
        </div>

        <!-- 购物车列表 -->
        <div class="shopcar" :class="{ cur: carVisible }" @click.stop>
          <header style="position: fixed; width: 100%">
            <div class="left">购物车</div>
            <div class="right" @click="clear">清空</div>
          </header>
          <section>
            <div v-for="(item, i) in shopList" :key="i">
              <div class="left">{{ item.name }}</div>
              <div class="right">
                <span style="color: #f00">￥{{ item.subtotal }}</span>
                <div class="minus" @click.stop="minus(item)">-</div>
                <span>{{ item.count }}</span>
                <div class="add" @click.stop="add(item)">+</div>
              </div>
            </div>
            <div style="border-bottom: none"></div>
            <div style="border-bottom: none"></div>
            <div style="border-bottom: none"></div>
            <div style="border-bottom: none"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goods as goods1 } from "../../apis/profile/profile";
import { mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      navIndex: this.value,
      goods: null,
      popupVisible: false,
      popupData: null,
      carVisible: false,
      scrollTopsList: [],
      rightBScroll: null,
      scrollY: 0,
      clickIndex: 0,
    };
  },
  props: {
    value: Number,
  },
  components: {},
  watch: {
    navIndex(nv) {
      this.$emit("input", nv);
    },
    value(nv) {
      this.navIndex = nv;
    },
  },
  methods: {
    changeTop() {
      document.documentElement.scrollTop = 1000000000;
    },
    checkleftItem(index) {
      let y = this.scrollTopsList[index];
      this.rightBScroll.scrollTo(0, -y, 300);
      this.clickIndex = index;
    },
    jumpCoves(item) {
      // 点击跳出 展示图
      this.popupData = item;

      this.popupVisible = true;
    },
    toCar(item2) {
      let { commit } = this.$store;
      commit("isLogin", (isLogin) => {
        if (isLogin) {
          commit("shopcar/get", {
            shopItem: item2,
            callback: (item) => {
              if (item) {
                this.$store.commit("shopcar/add", item);
              } else {
                this.$store.commit("shopcar/append", item2);
              }
            },
          });
        } else {
          this.$router.push("/login");
        }
      });
    },
    bottomCar() {
      this.carVisible == true
        ? (this.carVisible = false)
        : (this.carVisible = true);
    },
    minus(item) {
      this.$store.commit("shopcar/minus", item);
    },
    add(item) {
      this.$store.commit("shopcar/add", item);
    },
    clear() {
      this.$store.commit("shopcar/clear");
    },
    checkout() {
      this.$router.push("/checkout");
    },
    _initScroll() {
      new BScroll("#scrollLeft", {
        click: true,
        swipeTime: 100,
        swipeBounceTime: 100,
      });
      this.rightBScroll = new BScroll("#scrollRight", {
        click: true,
        probeType: 3,
      });
      this.rightBScroll.on("scroll", ({ y }) => {
        // y 到那个区域了?
        this.scrollY = Math.abs(y);
      });
      this.rightBScroll.on("scrollEnd", ({ y }) => {
        this.scrollY = Math.abs(y);
      });
    },
    _initTop() {
      let resNum = 0;
      let tops = [];
      tops.push(0);
      this.$refs.container.querySelectorAll(".right-goods").forEach((item) => {
        resNum += item.clientHeight;
        tops.push(resNum);
      }, 0);
      this.scrollTopsList = tops;
    },
  },
  computed: {
    _getCurrentIndex() {
      let index = this.scrollTopsList.findIndex((top, index) => {
        return (
          this.scrollY >= top && this.scrollY < this.scrollTopsList[index + 1]
        );
      });
      return index == -1 ? 0 : index;
    },
    ...mapState("shopcar", {
      shopList: (state) => state.shopCatList,
    }),
  },
  mounted() {
    goods1().then((res) => {
      this.goods = res.data.data;
      // 数据拿到后  DOM队列渲染完毕后  初始化scroll
      this.$nextTick(() => {
        this._initScroll();
        this._initTop();
      });
    });
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.prod
  .navvarContentItem_one
    > .right
      font-size: 20px;
      height: 200px;
      background: red;
      > .right-container
        > .right-goods
          > h6
            color:#757272;
            background-color: #eee;
            padding:10px;
          > .category-items
            > .item
              padding:15px;
              font-size:12px;
              color:#757272;
              display: flex;
              > .left-image
                width: 70px;
                height: 60px;
                margin-right: 5px;
                > img
                  width: 100%;
                  height: 100%;
              > .right-content
                > .title,
                > .desc
                  width: 155px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                > .title
                  font-size: 16px;
                  font-weight: bold;
                  color:#000;

                > .desc
                  font-size: 14px;
                  color:#757272;
                  margin:6px 0;
                > .sales
                  display: flex;
                  > p
                    font-size: 14px;
                  > p:first-of-type
                    margin-right: 10px;
                > .price
                  display: flex;
                  justify-content: space-between;
                  align-items:center;
                  > .left-price
                    font-weight: bold;
                    font-size:16px;
                    color:#f00
                  > .right-button
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 25px;
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    background-color: #009375;
                    border: 1px solid #009375;
                    color:#fff;
                    margin-right: -25px;
.mb
  height: 60px;
  opacity: 0;
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.popup

  margin-left: 15px;
  > div
    img
      margin-left: -15px;

      width: 300px
      height: 200px
  > .title
    > h4
      font-size:16px;
      margin: 10px 0;
    > div
      display: flex;
      margin-bottom: 10px;
      p:first-of-type
        font-size: 13px;
        color: #9a9494;
        margin-right: 20px;
      p:last-of-type
        font-size: 13px;
        color: #9a9494;
  > p
    background-color: rgb(248, 225, 55);
    padding: 5px 7px;
    font-size: 15px;
    width: 30px;
  > span
    font-size: 14px;
    display: inline-block
    margin:25px 0;
.prod
  display: none;
  .navvarContentItem_one
    font-size:14px;
    display: flex;
    height: 100%;
    .left
      width: 25%;
      flex-grow: 1;
      background: #eee;
      text-align:center;
      // overflow-y: auto;
      height: calc(100vh - 250px);
      > .left-container
        > p
          font-size:14px;
          padding:20px 0;
          &.cur
            background-color #fff;
            color: rgb(3, 167, 116);
    .right
      width: 75%;
      background-color: #fff;
      // overflow-y: auto;
      // overflow-x: hidden;
      height: calc(100vh - 250px);

  &.cur
    display: block;
h6,h4
p
  margin:0
.icon
  width: 20px;
  height: 20px;
p
  margin: 0;
  font-size:20px
.shopCar
  position: fixed;
  background-color: rgb(21, 27, 39);
  color: #fff;
  bottom: 0px;
  height: 60px
  display: flex;
  width: 100%;
  > div
    display: flex;
    justify-content: space-between;
    align-items: center;
  >.car
    > img
      width: 94px;
      height: 138px;
  > .pricearea
    width: 100%;
    position: relative
    .price
      color:#fff;
      margin-left:10px;
      h6
        text-align: center;
        font-size:20px;
      > p
        font-size: 14px;
        color:#9a9797;
        margin-top:5px;
    .btn
      font-size:14px;
      padding: 0 20px;
      background-color: rgb(44, 51, 59);
      height: 100%;
      line-height: 60px;
      font-weight:bold;
</style>
<style lang="stylus" scoped>
.shopcar
  display: none;
  position: absolute;
  height:200px;
  overflow-y: auto
  overflow-x: hidden;
  background-color:#fff;
  color:#9a9797;
  left: -94px
  bottom: 60px;
  width: 100vw;
  z-index: -1;
  header
    color:#9a9797;
    font-size:14px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 0;
    background-color: rgb(244, 245, 247)
    .left
      margin-left:20px;
    .right
      margin-right:20px;
      font-size:16px;
  section

    margin-top: 40px;
    >div
      padding:15px 0;
      margin:0 15px;
      font-size: 15px;
      border-bottom:1px solid #9a9a9a;
      display:flex;
      justify-content: space-between;
      align-items: center;
      .right
        display:flex;
        justify-content: space-between;
        align-items: center;
        .minus
          margin-left: 0.26667rem;
          height: 0.53333rem;
          width: 0.53333rem;
          border-radius: 50%;
          border: 0.05333rem solid #01b43c;
          text-align: center;
          font-weight: 900;
          font-size: 30px;
          color: #01b43c;
          line-height: 13px;
        .add
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background-color:rgb(1, 180, 60);
          text-align: center;
          font-weight: 900;
          color: #fff;
          border:2px solid transparent
          font-size: 22px;
          line-height: 17px;
        span:last-of-type
          margin:0 10px;

  &.cur
    display: block !important;
</style>
